<template>
  <div class="container">
    <el-tabs tab-position='left' class="mineTab" type="border">
      <!--
                       概览
                      -->
      <el-tab-pane label="概览">
        <div class="paneContainer">
          <div class="content">
            <div style="width:100%;background-color:#01b59c;padding-top:5px;padding-bottom:5px;">
              <span style="padding-left:5px;">猎手中心</span>
            </div>
            <div style="height:100%;">
              <div style="height:20px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;background-color:#ffffff;display:inline-block;padding-top:2px;padding-bottom:2px;">
                  <span style="padding-left:5px;">昨日收到赏金：</span>
                  <span style="float:right;padding-right:5px;color:#ab0c0c"> ￥ {{yesterdayGold}}</span>
                </div>
                <span class="clickableSpan" style="float:right">查看明细</span>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;background-color:#ffffff;display:inline-block;padding-top:2px;padding-bottom:2px;">
                  <span style="padding-left:5px;">账户可用赏金：</span>
                  <span style="float:right;padding-right:5px;color:#ab0c0c"> ￥ {{yesterdayGold}}</span>
                </div>
                <span class="clickableSpan" style="float:right">提现</span>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;display:inline-block;">
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>关注的行业匹配悬赏：</span>
                    <span style="width:1px;background-color:#e8e8e8;float:right;height:100%"></span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{industry}}个</span>
                  </div>
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>关注的职位匹配悬赏：</span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{position}}个</span>
                  </div>
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>我的标签匹配悬赏：</span>
                    <span style="float:right;padding-right:5px;">{{tags}}个</span>
                  </div>
                </div>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;display:inline-block;">
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>昨日被查看简历数：</span>
                    <span style="width:1px;background-color:#e8e8e8;float:right;height:100%"></span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{checkedResume}}个</span>
                  </div>
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>昨日已淘汰简历数：</span>
                    <span style="float:right;padding-right:5px;">{{dropedResume}}个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="height:20px;"></div>
          <div class="content">
            <div style="width:100%;background-color:#01b59c;padding-top:5px;padding-bottom:5px;">
              <span style="padding-left:5px;">悬赏中心</span>
            </div>
            <div style="height:100%;">
              <div style="height:20px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;background-color:#ffffff;display:inline-block;padding-top:2px;padding-bottom:2px;">
                  <span style="padding-left:5px;">可用悬赏币：</span>
                  <span style="float:right;padding-right:5px;color:#ab0c0c"> ￥ {{avaliableAward}}</span>
                </div>
                <span class="clickableSpan" style="float:right">充值</span>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;background-color:#ffffff;display:inline-block;padding-top:2px;padding-bottom:2px;">
                  <span style="padding-left:5px;">冻结悬赏币：￥</span>
                  <span style="float:right;padding-right:5px;color:#ab0c0c"> ￥ {{frozenAward}}</span>
                </div>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;display:inline-block;">
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>收到待查看简历：</span>
                    <span style="width:1px;background-color:#e8e8e8;float:right;height:100%"></span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{unCheckedResume}}个</span>
                  </div>
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>进行中的任务：</span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{mission}}个</span>
                  </div>
                </div>
                <span class="clickableSpan" style="float:right">立即发布</span>
              </div>
              <div style="height:10px;"></div>
              <div style="margin-left:auto;margin-right:auto;width:900px;" class="clearfix">
                <div style="width:810px;display:inline-block;">
                  <div style="float:left;width:33.33333333%;background-color:#ffffff;padding-top:2px;padding-bottom:2px;" class="clearfix">
                    <span style='margin-left:5px;'>可免费邀请面试简历数：</span>
                    <span style="width:1px;background-color:#e8e8e8;float:right;height:100%"></span>
                    <span style="float:right;padding-right:5px;border-right:1px #8e8e8e solid;">{{freeInvite}}个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--
                       基本信息
                      -->
      <el-tab-pane label="基本信息">
        <div class="paneContainer" style="background-color:#d9edeb;">
          <div style="padding-top:20px;"></div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>昵称:</span>
            </div>
            <div class="basicItemInput">
              <el-input class='input' v-model='loginName' placeholder='请输入昵称'></el-input>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>真实姓名:</span>
            </div>
            <div class="basicItemInput">
              <el-input class='input' v-model='loginName' placeholder='请输入姓名'></el-input>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>性别:</span>
            </div>
            <div class="basicItemInput" style="height:20px;margin-top:10px">
              <el-radio v-model="sex" label="1" name="male">男</el-radio>
              <el-radio v-model="sex" label="2" name='female'>女</el-radio>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>生日:</span>
            </div>
            <div class="basicItemInput">
              <el-date-picker v-model="birth" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>居住地:</span>
            </div>
            <div class="basicItemInput" style="margin-left:0">
              <!-- https://github.com/dwqs/vue-area-linkage -->
              <area-select :level='2' type='text' v-model="address" :data="pcaa"></area-select>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
              <span>家乡:</span>
            </div>
            <div class="basicItemInput" style="margin-left:0">
              <area-select :level='2' type='text' v-model="hometown" :data="pcaa"></area-select>
            </div>
          </div>
          <div class="basicItemContainer">
            <div class="basicItemLabel">
            </div>
            <div class="basicItemInput">
              <el-button type="primary" round style="margin:0,auto; width: 300px;display:block">保存</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--
                       银行卡操作
                      -->
      <el-tab-pane label="银行卡管理">
        <div class="paneContainer">
          <div>
            <el-button type="primary" @click="dialogVisible = true" style="margin:0,auto; width: 300px">添加银行卡</el-button>
            <span></span>
          </div>
          <div style="background-color:#d9edeb;">
          <el-table :data="tableData3" height="700" border style="width: 80%;margin-top:20px;margin-left:auto;margin-right:auto;">
            <el-table-column prop="date" label="收款人姓名" width="180">
            </el-table-column>
            <el-table-column prop="name" label="银行名称">
            </el-table-column>
            <el-table-column prop="address" label="卡号">
            </el-table-column>
            <el-table-column prop="address" label="支行信息">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </div>
      </el-tab-pane>
      <!--
                       消息中心
                      -->
      <el-tab-pane label="消息中心">
        <router-view name="message" class="paneContainer" />
      </el-tab-pane>
      <!--
                       安全设置
                      -->
      <el-tab-pane label="安全设置">
        <router-view name="security" class="paneContainer" />
      </el-tab-pane>
    </el-tabs>
    <!--
                       银行卡提示框
                      -->
    <el-dialog title="添加银行卡" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div style="width:100%;height:100%">
        <div class="basicItemContainer">
          <div class="basicItemLabel">
            <span>收款人姓名：</span>
          </div>
          <div class='basicItemInput'>
            <span>张三</span>
          </div>
        </div>
        <div class="basicItemContainer">
          <div class="basicItemLabel">
            <span>银行卡号：</span>
          </div>
          <div class='basicItemInput'>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="basicItemContainer">
          <div class="basicItemLabel">
            <!--https://github.com/navyxie/bankcardinfo -->
            <span>银行名称：</span>
          </div>
          <div class='basicItemInput'>
            <span>张三</span>
          </div>
        </div>
        <div class="basicItemContainer">
          <div class="basicItemLabel">
            <span>银行卡号：</span>
          </div>
          <div class='basicItemInput'>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="basicItemContainer">
          <div class="basicItemLabel">
          </div>
          <div class="basicItemInput">
            <el-button type="primary" style="margin:0,auto; width: 300px;display:block">保存</el-button>
          </div>
        </div>
      </div>
      <!--<span slot="footer" class="dialog-footer">
                          <el-button @click="dialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>-->
    </el-dialog>
  </div>
</template>
<style>
mineSummaryItem1 {}

.bankCardItemContainer {
  width: 100px;
  text-align: right;
}

.bankCardItemContainer::after {
  content: '';
  display: block;
  clear: both;
}

.messageHeader {
  height: 50px;
  width: 100%;
}

.claerfix::after,
.claerfix::before {
  content: '';
  display: table;
  clear: both;
}

.messageHeader::after {
  content: '';
  display: block;
  clear: both;
}

.paneContainer {
  width: 1080px;
}

.mineTab {
  width: 100%;
}
.el-tabs--border-card>.el-tabs__content {
    padding: 0px;
}
.el-tabs--left .el-tabs__header.is-left {
    float: left;
    margin-bottom: 0;
    margin-right: 0px;
}
.container {
  height: 100%;
}

.spanItem {
  margin-left: 20px;
}

.content {
  height: 200px;
  width: 100%;
  background-color: #d9edeb
}

.clickableSpan {
  color: #ab0c0c;
  cursor: pointer;
}

.content::after {
  content: '';
  display: block;
  clear: both;
}

.basicItemContainer {
  height: 50px;
}

.basicItemContainer::after {
  content: '';
  display: block;
  clear: both;
}

.basicItemLabel {
  float: left;
  width: 100px;
  text-align: right;
  margin-top: 10px;
}

.basicItemInput {
  float: left;
  margin-left: 10px;
}
</style>
<script>
import { pca, pcaa } from 'area-data'
export default {
  data: function() {
    return {
      // 昨日收到赏金
      yesterdayGold: '----',
      // 账户可用赏金
      avaliableGold: '--',
      // 关注的行业匹配悬赏
      industry: '--',
      // 关注的职位匹配悬赏
      position: '--',
      // 我的标签匹配悬赏
      tags: '--',
      // 收到待查看简历
      unCheckedResume: '--',
      // 昨日被查看简历数
      checkedResume: '--',
      // 昨日已淘汰简历数
      dropedResume: '--',
      // 进行中的任务
      mission: '--',
      // 可用悬赏币
      avaliableAward: '--',
      // 冻结悬赏币
      frozenAward: '--',
      // 可免费邀请面试简历数
      freeInvite: '--',
      // 性别
      sex: '',
      // 出生日期
      birth: '',
      // 省市 数据集
      pcaa,
      pca,
      // 居住地
      address: '',
      // 家乡
      hometown: '',
      dialogVisible: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>
